<template>
  <view class="container">
    <!-- 背景图片 -->
    <view class="background-image-wrapper">
      <image
        class="background-image"
        :src="getPosterImageUrl()"
        mode="aspectFill"
      ></image>
    </view>

    <!-- 返回按钮 -->
    <view class="back-button-wrapper">
      <view class="global-header-left" @click="goBack">
        <view class="global-back-button">
          <text class="global-back-icon">‹</text>
        </view>
        <text class="global-back-text">返回</text>
      </view>
    </view>

    <!-- 切换控件区域 - 在返回按钮下方，包含关键词选择和性别切换 -->
    <view class="switch-controls-wrapper">
      <!-- 关键词选择 -->
    <view class="switch-trigger" @click="togglePicker">
      <text class="switch-trigger-text">{{ selectedKeyword || '请选择关键词' }}</text>
      <text class="switch-trigger-arrow">▼</text>
      </view>
      
      <!-- 性别切换按钮 -->
      <view class="gender-switch" @click="toggleGender">
        <text class="gender-icon">{{ gender === '男' ? '♂' : '♀' }}</text>
        <text class="gender-text">{{ gender }}</text>
      </view>
    </view>

    <!-- 底部选择面板遮罩 -->
    <view
      class="picker-mask"
      :class="{ show: showPicker }"
      @click="closePicker"
    ></view>

    <!-- 底部选择面板 -->
    <view class="picker-panel" :class="{ show: showPicker }">
      <view class="picker-header">
        <text class="picker-cancel" @click="closePicker">取消</text>
        <text class="picker-title">选择关键词</text>
        <text class="picker-confirm" @click="confirmSelection">确定</text>
      </view>
      <view class="picker-content">
        <view
          class="picker-option"
          v-for="(option, index) in options"
          :key="index"
          :class="{ active: tempSelectedKeyword === option.text }"
          @click="selectOption(option.text)"
        >
          <text class="picker-option-text">{{ option.text }}</text>
          <text class="picker-option-check" v-if="tempSelectedKeyword === option.text">✓</text>
        </view>
      </view>
    </view>

    <!-- 分享歌单按钮 - 右下角 -->
    <view class="share-button" @click="sharePlaylist">
      <text class="share-text">分享歌单</text>
    </view>
  </view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
  data() {
    return {
      selectedKeyword: '', // 用户选择的行走关键词
      tempSelectedKeyword: '', // 临时选中的关键词（用于选择面板）
      showPicker: false, // 控制选择面板显示/隐藏
      gender: '男', // 性别：男、女，默认男性
      options: [
        { text: '温暖同行' },
        { text: '活力四射' },
        { text: '自由随性' },
        { text: '勇往直前' },
      ],
    };
  },
  onLoad(options) {
    // 接收从 playlist 页面传递的参数
    if (options.keyword) {
      this.selectedKeyword = decodeURIComponent(options.keyword);
    } else {
      // 如果没有传递参数，默认选择第一个
      this.selectedKeyword = this.options[0].text;
    }
    // 接收性别参数
    if (options.gender) {
      this.gender = decodeURIComponent(options.gender);
    }
  },
  methods: {
    getImageUrl,
    // 获取关键词对应的拼音首字母（前四个字）
    getKeywordInitials(keyword) {
      // 关键词到拼音首字母的映射
      const keywordMap = {
        '温暖同行': 'WNTX', // Wen Nuan Tong Xing
        '活力四射': 'HLSS', // Huo Li Si She
        '自由随性': 'ZYSX', // Zi You Sui Xing
        '勇往直前': 'YWZQ', // Yong Wang Zhi Qian
      };
      return keywordMap[keyword] || 'WNTH'; // 默认值
    },
    // 根据关键词和性别生成海报图片URL
    getPosterImageUrl() {
      if (!this.selectedKeyword) {
        // 如果没有选择关键词，返回默认图片
        return this.getImageUrl('poster/YWZQM.jpg');
      }
      
      // 获取关键词的拼音首字母（前四个字母）
      const initials = this.getKeywordInitials(this.selectedKeyword);
      
      // 根据性别获取后缀：M-男，F-女
      const genderSuffix = this.gender === '女' ? 'F' : 'M';
      
      // 组合文件名：前四个字母 + 性别后缀 + .jpg
      const fileName = `${initials}${genderSuffix}.jpg`;
      
      // 返回完整的URL
      return `https://hykoc.oss-cn-beijing.aliyuncs.com/koc/tc2025/poster/${fileName}`;
    },
    goBack() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    togglePicker() {
      // 打开选择面板时，将当前选中的关键词设置为临时选中
      if (!this.showPicker) {
        this.tempSelectedKeyword = this.selectedKeyword;
      }
      this.showPicker = !this.showPicker;
    },
    closePicker() {
      this.showPicker = false;
    },
    selectOption(keyword) {
      // 在选择面板中临时选中
      this.tempSelectedKeyword = keyword;
    },
    confirmSelection() {
      // 确认选择，更新选中的关键词并关闭面板
      this.selectedKeyword = this.tempSelectedKeyword;
      this.showPicker = false;
      // 可以在这里添加切换关键词后的逻辑，比如重新加载歌单
      uni.showToast({
        title: `已切换到${this.selectedKeyword}`,
        icon: 'none',
        duration: 1500,
      });
    },
    toggleGender() {
      // 切换性别
      this.gender = this.gender === '男' ? '女' : '男';
      // 性别切换后，海报图片会自动更新（因为 getPosterImageUrl 方法会根据 gender 生成URL）
      uni.showToast({
        title: `已切换到${this.gender}性`,
        icon: 'none',
        duration: 1500,
      });
    },
    sharePlaylist() {
      // 跳转到分享页面，传递当前选中的主题和性别
      if (!this.selectedKeyword) {
      uni.showToast({
          title: '请先选择主题',
        icon: 'none',
        duration: 2000,
      });
        return;
      }
      
      uni.navigateTo({
        url: `/pages/music/playlist-share?theme=${encodeURIComponent(this.selectedKeyword)}&gender=${encodeURIComponent(this.gender)}`,
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #fefefe; 
}

/* 背景图片容器 */
.background-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover模式，覆盖整个容器 */
  object-position: center; /* 居中显示，上下对称截掉 */
  display: block;
}

/* 返回按钮包装器 */
.back-button-wrapper {
  position: absolute;
  top: calc(var(--status-bar-height, 44rpx) + 60rpx);
  left: 30rpx;
  z-index: 100;
}

/* 全局返回按钮样式 - 完全复制其他页面的样式 */
.global-back-button {
  width: 60rpx;
  height: 60rpx;
  background: #ff0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.global-back-icon {
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 1;
}

.global-back-text {
  color: white;
  font-size: 28rpx;
  font-weight: bold;
}

.global-header-left {
  display: flex;
  align-items: center;
}

/* 切换控件包装器 - 包含关键词选择和性别切换 */
.switch-controls-wrapper {
  position: absolute;
  top: calc(var(--status-bar-height, 44rpx) + 150rpx);
  left: 30rpx;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

/* 切换控件触发器 - 缩小并融入背景 */
.switch-trigger {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
  border-radius: 50rpx;
  padding: 16rpx 48rpx;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  max-width: 280rpx;
  transition: all 0.3s ease;
}

.switch-trigger:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.35);
}

.switch-trigger-text {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200rpx;
}

.switch-trigger-arrow {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* 性别切换按钮 */
.gender-switch {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
  border-radius: 50rpx;
  padding: 16rpx 32rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  min-width: 100rpx;
}

.gender-switch:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.35);
}

.gender-icon {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.gender-text {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

/* 底部选择面板遮罩 */
.picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.picker-mask.show {
  opacity: 1;
  visibility: visible;
}

/* 底部选择面板 */
.picker-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.picker-panel.show {
  transform: translateY(0);
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-cancel,
.picker-confirm {
  font-size: 28rpx;
  color: #fbb03b;
  font-weight: bold;
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.picker-content {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 0;
}

.picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  transition: background-color 0.2s ease;
}

.picker-option:active {
  background-color: #f5f5f5;
}

.picker-option.active {
  background-color: #f0f7ff;
}

.picker-option-text {
  font-size: 30rpx;
  color: #333;
}

.picker-option.active .picker-option-text {
  color: #fbb03b;
  font-weight: bold;
}

.picker-option-check {
  font-size: 32rpx;
  color: #fbb03b;
  font-weight: bold;
}

/* 分享歌单按钮 - 右下角 */
.share-button {
  position: absolute;
  bottom: 140rpx;
  right: 60rpx;
  z-index: 100;
  background: #fbb03b;
  border-radius: 44rpx;
  height: 88rpx;
  width: 200rpx;
  padding: 0 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(251, 176, 59, 0.4);
  transition: all 0.3s ease;
}

.share-button:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 12rpx rgba(251, 176, 59, 0.3);
}

.share-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .back-button-wrapper {
    top: calc(var(--status-bar-height, 44rpx) + 40rpx);
    left: 20rpx;
  }

  .switch-controls-wrapper {
    top: calc(var(--status-bar-height, 44rpx) + 140rpx);
    left: 20rpx;
    gap: 15rpx;
  }

  .switch-trigger {
    max-width: 240rpx;
    padding: 14rpx 20rpx;
  }

  .switch-trigger-text {
    font-size: 22rpx;
    max-width: 160rpx;
  }

  .switch-trigger-arrow {
    font-size: 16rpx;
  }

  .gender-switch {
    padding: 14rpx 24rpx;
    min-width: 90rpx;
    gap: 6rpx;
  }

  .gender-icon {
    font-size: 24rpx;
  }

  .gender-text {
    font-size: 22rpx;
  }

  .picker-header {
    padding: 25rpx 30rpx;
  }

  .picker-title {
    font-size: 28rpx;
  }

  .picker-cancel,
  .picker-confirm {
    font-size: 26rpx;
  }

  .picker-option {
    padding: 25rpx 30rpx;
  }

  .picker-option-text {
    font-size: 28rpx;
  }

  .share-button {
    bottom: 100rpx;
    right: 20rpx;
    padding: 16rpx 32rpx;
  }

  .share-text {
    font-size: 26rpx;
  }
}
</style>
